Fixes #289

Summary

Added BountyGrid.tsx — a generic CSS Grid wrapper component that provides responsive column layouts for bounty cards across all screen sizes.

Changes

• frontend/src/components/bounty/BountyGrid.tsx — New component using Tailwind CSS Grid:
  • grid-cols-1 on mobile (< 640px)
  • md:grid-cols-2 on tablet (≥ 768px)
  • lg:grid-cols-3 on desktop (≥ 1024px)
  • xl:grid-cols-4 on wide screens (≥ 1280px)
  • gap-6 for consistent spacing between cards
• frontend/src/components/bounty/index.ts — Export BountyGrid

Usage Example

import { BountyGrid, BountyCard } from @/components/bounty

<BountyGrid>
  <BountyCard title="Fix auth bug" reward={{ amount: 100, currency: "USD" }} deadline="2026-05-01" status="open" />
  <BountyCard title="Add dark mode" reward={{ amount: 50, currency: "USD" }} deadline="2026-06-01" status="open" />
  {/* ... more cards */}
</BountyGrid>

Verification

1. Open any page rendering bounty cards
2. Wrap <BountyCard> items with <BountyGrid>
3. Resize browser window — layout should adapt: 1 → 2 → 3 → 4 columns
4. Confirm gap spacing is consistent (gap-6 = 1.5rem)